<template>
  <div>
    <NavMenu></NavMenu>
    <el-row class="tac">
      <el-col :span="4" style="border: 1px solid #ededed;">

        <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="selectChange">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span slot="title">论文收藏</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" style="border: 1px solid #ededed;">

        <div v-if="activeIndex==='1'">
          <h5>个人信息</h5>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form ref="infoForm" :model="infoForm" label-width="80px">
                <el-form-item label="用户名：">
                  <span>{{ infoForm.id }}</span>
                </el-form-item>
                <el-form-item label="姓名：">
                  <el-input v-model="infoForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                  <el-radio-group v-model="infoForm.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="单位：">
                  <el-input v-model="infoForm.institution"></el-input>
                </el-form-item>
                <el-form-item label="职位：">
                  <el-select v-model="infoForm.title" placeholder="请选择职称">
                    <el-option label="本科生" value="本科生"></el-option>
                    <el-option label="研究生" value="研究生"></el-option>
                    <el-option label="副教授" value="副教授"></el-option>
                    <el-option label="教授" value="教授"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <h5>论文收藏:{{ papers.length }}篇</h5>
          </el-row>
          <el-row>
            <div style="min-height: 40vh">
              <div v-for="(item,index) in papers.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
                <el-card class="box-card">
                  <el-link
                      :href="'/#/paper?id=' + encodeURI(item.id)"
                      target="_blank" class="title" type="primary">
                    {{ item.title }}
                  </el-link>
                  <!--              <el-link :href="'#/paper?id=&title='+item.title+'&resource='+item.resource" target="_blank" class="title" type="primary">-->
                  <!--                {{ item.title }}-->
                  <!--              </el-link>-->
                  <br/>
                  <p class="author"><span style="font-size: 16px;color:#909399">作者：</span>{{ item.author }}</p>
                  <p class="institution"><span style="font-size: 16px;color:#909399">机构：</span>{{ item.institution }}
                  </p>
                  <p class="date"><span style="font-size: 16px;color:#909399">时间：</span>{{ item.pubdate }}</p>
                  <p class="abstract"><span style="font-size: 14px;color:#909399">摘要：</span>{{ item.abstract }}</p>
                  <!--              <p class="content"><br>{{ item.author }}</p>-->
                  <!--              <p class="id">{{ item.id }}</p>-->
                </el-card>
              </div>
              <el-pagination
                  @size-change="handleSearchSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  layout="sizes, total, prev, pager, next, jumper"
                  :total="totalPages">
              </el-pagination>
            </div>
          </el-row>
          <el-divider>用户兴趣分布</el-divider>
          <el-row>
            <el-col :span="12" style="border: 1px solid #ededed;">
              <el-row :span="4">
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                      v-for="item in times"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-row>
              <el-row :span="20" style="width: calc(100% - 30px); height: 500px; margin: 0 10px 10px 0;">
                <chartPie :data="distribution[value]"></chartPie>
              </el-row>
            </el-col>

            <el-col :span="12" style="border: 1px solid #ededed;">
              <el-row :span="23" style="width: calc(100% - 30px); height: 550px; margin: 0 10px 10px 0;">
                <chartBarVertical :xAxis="bartimes" :data="cites"></chartBarVertical>
              </el-row>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
// 侧边菜单，包括个人账户信息的查看与修改，以及论文收藏的情况
import NavMenu from "@/components/NavMenu";
import Vue from "vue";
import chartPie from "@/components/chartPie";
import chartBarVertical from "@/components/chartBarVertical";

export default {
  name: "Userinfo",
  components: {
    NavMenu,
    chartPie,
    chartBarVertical
  },
  data() {
    return {
      activeIndex: '1',
      infoForm: {
        id: 'admin',
        pwd: '',
        title: '其他',
        gender: -1,
        institution: '',
        name: ''
      },
      papers: [],
      currentPage: 1,
      totalPages: 0,
      pageSize: 10,

      bartimes: [],
      cites: [],
      times: [],
      value: '',
      distribution: {},
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    activeIndex: {
      handler(newVal) {
        if (newVal === '2') {
          this.userCollect()
        }
      }
    }
  },
  methods: {
    init() {
      if (localStorage.getItem('userLoginStatus') === 'true') {
        this.infoForm = JSON.parse(localStorage.getItem('userInfo'))
        console.log('userpage init:', this.infoForm)
        if (JSON.stringify(this.$route.query) !== '{}') {
          this.activeIndex = this.$route.query.pages
        }
      } else {
        this.$router.push('/login')
      }
    },
    userCollect() {
      Vue.prototype.post('http://192.168.0.94:2226/show_user_papers_page', JSON.stringify({
        id: this.infoForm.id,
        pwd: this.infoForm.pwd
      }), this.getUserCollect)

    },
    selectChange(index) {
      this.activeIndex = index
    },
    getUserCollect(response) {
      this.papers = response.data.papers
      response.data.times.forEach(item => {
        this.times.push({
          label: item,
          value: item
        })
      })
      if (this.times.length > 0) {
        this.value = this.times[0].value
      }

      this.distribution = response.data.distribution

      this.bartimes = response.data.bartimes
      this.cites = response.data.cites
    },
    onSubmit() {
      Vue.prototype.post('http://192.168.0.94:2226/save_user_data', JSON.stringify(this.infoForm), this.submitResponse)
    },
    submitResponse(res) {
      if (res.data.retcode === 0) {
        this.infoForm = res.data.user
        console.log('userpage update:', this.infoForm)
        localStorage.setItem('userInfo', JSON.stringify(this.infoForm))
        this.$message({
          type: 'success',
          message: '保存修改成功'
        });
      } else {
        this.$message({
          type: 'error',
          message: '保存失败'
        });
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.curPage = val
    },
    handleSearchSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    }
  }
}
</script>

<style lang="scss" scoped>

.body {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
}

.box-card {
  margin: 10px;
}

.title {
  font-size: 20px;
  float: left;
  text-align: left;
}

.author {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.institution {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.date {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.abstract {
  font-size: 14px;
  line-height: 30px;
  color: #000;
  text-align: left;
}

.box-card {
  margin-top: 8px;
  filter: Alpha(opacity=80);
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}
</style>
